<script>
import moreIcon from "../../assets/more.png"
import correctionIcon from "../../assets/correction.png"
import closeIcon from "../../../../../static/close.png"
import common from "../common"
import collection from "../collection.vue"
import speedRateIcon from "../../assets/speed_rate.png"
import setting from "../setting.vue"
import settingIcon from "../../assets/setting.png"
export default {
  name: "moreMenu",
  components: { collection, setting },
  data() {
    return {
      moreIcon,
      correctionIcon,
      closeIcon,
      speedRateIcon,
      settingIcon,
      common,
      showPopover: false,
    }
  },
  props: {
    details: {
      type: Object,
      default: {},
    },
  },
  emits: ["handleSpeedRateModify"],
}
</script>

<template>
  <view class="component">
    <!--		浮动，更多菜单-->
    <view class="popover" v-show="showPopover">
      <!--			关闭-->
      <view class="btn-item btn">
        <image class="close-icon" :src="closeIcon" @click="showPopover = false"></image>
      </view>
      <view
        class="btn-item btn"
        @click="
          () => {
            $refs.setting.open()
            showPopover = false
          }
        "
      >
        <image class="icon" :src="settingIcon"></image>
        <view class="text">设置</view>
      </view>
      <!--			收藏-->
      <view class="btn-item btn">
        <collection :structure-id="details.structureId" :is-collected-props="details.existFavorite"></collection>
      </view>
      <!--			纠错-->
      <view
        class="btn-item btn"
        @click="
          () => {
            common.handleCorrectQuestion(details.structureId)
            showPopover = false
          }
        "
      >
        <image class="icon" :src="correctionIcon"></image>
        <view class="text">纠错</view>
      </view>
      <!--			倍速调节-->
      <view
        class="btn-item btn"
        @click="
          () => {
            $emit('handleSpeedRateModify')
            showPopover = false
          }
        "
      >
        <image class="icon" :src="speedRateIcon"></image>
        <view class="text">倍速</view>
      </view>
    </view>
    <view class="btn-item" @click="showPopover = true">
      <image class="icon" :src="moreIcon"></image>
      <view class="text">更多</view>
    </view>
    <setting ref="setting"></setting>
  </view>
</template>

<style scoped lang="scss">
.component {
  width: 100%;
  .popover {
    position: fixed;
    z-index: 999;
    left: 0;
    bottom: env(safe-area-inset-bottom);
    background: white;
    border: 2rpx solid var(--dark-border-color);
    padding: calc(20rpx * var(--font-size-rate));
    transition: opacity 0.3s;
    > .btn:not(:last-child) {
      margin-bottom: calc(30rpx * var(--font-size-rate));
    }
    > .btn-item {
      width: calc(100rpx * var(--font-size-rate));
      height: calc(120rpx * var(--font-size-rate));
      > .close-icon {
        width: calc(40rpx * var(--font-size-rate));
        height: calc(40rpx * var(--font-size-rate));
      }
    }
  }
}
.btn-item {
  width: 100%;
  height: calc(100rpx * var(--font-size-rate));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  > .icon {
    height: calc(50rpx * var(--font-size-rate));
    max-width: calc(50rpx * var(--font-size-rate));
  }
  > .text {
    margin-top: calc(10rpx * var(--font-size-rate));
    font-size: calc(28rpx * var(--font-size-rate));
  }
}
</style>
